<template>
	<view class="center">
		
		<view class="center-top">
			<view class="center-icon">
				<image class="center-set" src="/static/icon/set.png"></image>
				
				<view class="center-sign" @click="signin">
					<image src="/static/icon/sign.png"></image>
					<view class="sign">{{signStatus}}</view>
				</view>
				
			</view>
			
			<view class="center-info">
				<image class="avatar" @click="upload" :src="siteUrl+userInfo.avatar"></image>
				<view class="info">
					<view class="name">{{userInfo.nickname}}</view>
					<view class="points">积分:{{points}}</view>				
				</view>						
			</view>
			
			<view class="count">
				
				<navigator url="../center/collect">
				<view class="count-block">
					<view class="num">{{userInfo.num_collect}}</view>
					<view class="note">我的收藏</view>
				</view>
				</navigator>
				
				<image class="line" src="/static/img/line.png"></image>
				
				<navigator url="../center/attention" hover-class="navigator-hover">				
				<view class="count-block">
					<view class="num">{{userInfo.num_attention}}</view>
					<view class="note">关注</view>
				</view>
				</navigator>
				
				<image class="line" src="/static/img/line.png"></image>
				
				
				<navigator url="../center/visitprint">
				<view class="count-block">
					<view class="num">{{userInfo.num_view}}</view>
					<view class="note">浏览</view>
				</view>
				</navigator>
			</view>
		</view>
		
		<view class="mid">
			<navigator url="../center/myorder">
			<view class="mid-block">
				<image src="/static/icon/visit.png"></image>
				<view class="note">预约看房</view>
			</view>
			</navigator>
			<navigator url="../center/know">
			<view class="mid-block">
				<image src="/static/icon/note.png"></image>
				<view class="note">租房须知</view>
			</view>
			</navigator>
			<view class="mid-block">
				<image src="/static/icon/question.png"></image>
				<view class="note">问卷调查</view>
			</view>
			<view class="mid-block">
				<image src="/static/icon/contact.png"></image>
				<view class="note">联系客服</view>
			</view>
		</view>
		
		
		<view class="bottom">
			<image class="about-icon" src="/static/icon/about.png"></image>
			<view class="bottom-block">
				<view class="note">关于我们</view>
				<image src="/static/icon/arrow.png"></image>
			</view>
		
		</view>
		<image class="heng" src="/static/img/heng.png"></image>
		<view class="bottom">
			<image class="about-icon" src="/static/icon/guli.png"></image>
			<view class="bottom-block">
				<view class="note">喜欢我们，打分鼓励一下</view>
				<image src="/static/icon/arrow.png"></image>
			</view>
		</view>
		<image class="heng" src="/static/img/heng.png"></image>
		
		<view class="bottom">
			<image class="about-icon" src="/static/icon/yijian.png"></image>
			<view class="bottom-block">
				<view class="note">意见反馈</view>
				<image src="/static/icon/arrow.png"></image>
			</view>
		</view>
		<image class="heng" src="/static/img/heng.png"></image>
		
		
		
		<view class="bottom" @click="loginout">
			<image class="about-icon" src="/static/icon/yijian.png"></image>
			<view class="bottom-block">
				<view class="note">退出登录</view>
				<image src="/static/icon/arrow.png"></image>
			</view>
		</view>
		
		<image class="heng" src="/static/img/heng.png"></image>
		
		
		
		
		<mpopup  ref="mpopup" :isdistance="true"></mpopup>  
	</view>
</template>

<script>
	
	var _self;	
	 import mpopup from '../../components/xuan-popup/xuan-popup.vue';
	export default {
		components:{
			mpopup
		},
		data() {
			return {
				siteUrl:this.websiteUrl,
				title: 'Hello',
				userInfo:[],
				points:0,
				stateTab:true,
				signStatus:'签到'
			}
		},
		onLoad() {
			_self = this;
			this.checkLogin();		
			this.getuserInfo();
			this.stateTab = false
		},
		onShow() {
			if(this.stateTab){
				this.getuserInfo();
			}
			this.stateTab = true
		},
		methods: {
			loginout(){
				uni.showModal({
				    title: '提示',
				    content: '确定退出吗?',
				    success: function (res) {
				        if (res.confirm) {
							uni.clearStorageSync();
							
							uni.reLaunch({
								url:"/pages/login/login"
							})				            							
				        } else if (res.cancel) {
											            												
				        }
				    }
				});	
			},
			signin(){
				uni.request({
					url: this.websiteUrl+'/userapi.php/center/signin',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					data: {token:uni.getStorageSync('token')},
					success: res => {
						if(res.data.code == 1){
							_self.points = res.data.data
							_self.signStatus = '已签到'
							_self.$refs.mpopup.open({
								type:'success',
								content:res.data.msg,
								timeout:2000,
							});
							return false
						}else{
							_self.$refs.mpopup.open({
								type:'info',
								content:res.data.msg,
								timeout:2000,
							});
							return false
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getuserInfo(){				
				uni.request({
					url: this.websiteUrl+'/userapi.php/center/userInfo',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					method: 'POST',
					data: {
					    token: uni.getStorageSync('token'),					   
					},
					success: function(res){						
						if(res.data.code == 1){							
							_self.userInfo = res.data.data;	
							_self.points = 	res.data.data.points					
							_self.signStatus = res.data.data.signStatus
							
							
													
						}										
					}					
				});									
			},
			upload(){
			   _self = this			 
			   uni.chooseImage({
			       success: function(chooseImageRes) {
			           const tempFilePaths = chooseImageRes.tempFilePaths;					  
										   uni.uploadFile({											
											   url: 'http://api.yjzufang.com/api.php/center/upload', //仅为示例，非真实的接口地址
											   filePath: tempFilePaths[0],
											   name: 'file',											
											   success: function(res){											  
												   var re = JSON.parse(res.data);												  
												   if(re.code == 1){
													   uni.request({
													   	url: 'http://api.yjzufang.com/api.php/center/avatarEdit',
													   	method: 'POST',
														header: {
															'content-type':'application/x-www-form-urlencoded',						
														},
													   	data: {
															 token: uni.getStorageSync('token'),		
															avatar:re.data															
														},
													   	success: function(result) {															
															if(result.data.code == 1){
																_self.userInfo.avatar = result.data.data
															}														
														},
													   	
													   });
													   
												   }												   
										   }
									   })
						}
			   });
			}
			
			
			

		}
	}
</script>

<style>
    .center {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #E5E5E5;
		height: 1620rpx;
	}
	
	.center-top{
		width:100%;
		height: 556rpx;
		background: url('/static/img/center-bg.png') no-repeat;
		background-size:100% 100%;
	}
	
	
	.center-icon{
		width: 100%;
		height: 60rpx;
		padding-top: 100rpx;
	}
	
	
	.center-set{
		float:left;
		width:44rpx;
		height: 46rpx;
		margin-left: 28rpx;
		margin-top: 6rpx;
	}
	
	.center-sign{
		float:left;
		width: 148rpx;
		height: 60rpx;
		margin-left: 508rpx;
		background:#747474;
		text-align:center;
		border-radius: 60rpx;
		color:white;
		font-size: 26rpx;
		line-height: 60rpx;
	}
	
	.center-sign image{
		float:left;
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}
	
	.center-sign .sign{
		float: left;
		height:60rpx;
		line-height: 60rpx;
	}
	
	.center-info{
		width: 100%;
		height:140rpx;
		text-align: left;
		margin-top: 36rpx;
	}
	
	.center-info .avatar{
		width: 140rpx;
		height: 140rpx;
		margin-left:32rpx;
		float:left;
		border-radius:50%
	}
	
	.center-info .info{
		width:182rpx;
		height:140rpx;
		float:left;
		margin-left:32rpx;
	}
	
	.center-info .info .name{
		width:100%;
		font-size: 40rpx;
		color:#373737;
	}
	
	.center-info .info .points{
		width:100%;
		font-size: 22rpx;
		color:#999999;
	}
	
	.count{
		width: 100%;
		margin-top: 60rpx;
		margin-bottom: 50rpx;
		height: 100rpx;
		text-align:center;
	}
	
	.count-block{
		width: 248rpx; 
		height: 100rpx;
		float:left;
	}
	
	.count .line{
		width: 2rpx;
		height: 100rpx;
		float: left;
	}
	
	.count-block .name{
		font-size: 40rpx;
		color:#373737;
	}
	
	.count-block .note{
		color: #666667;
		font-size: 26rpx;
	}
	
	.mid{
		width: 100%;
		height: 190rpx;
		background: white;
		text-align:center;
		margin-bottom:10rpx;
	}
	
	.mid-block{
		width: 25%;
		height: 190rpx;
		float:left;
	}
	
	.mid-block image{
		width: 80rpx;
		height: 80rpx;
		margin-top: 40rpx;	
	}
	
	.mid-block .note{
		width:100%;
		font-size:26rpx;
		color: #373737;
	}
	
	.bottom{
		width:100%;
		height:100rpx;
		
		background: white;
	}
	
	.about-icon{
		width:35rpx;
		height: 35rpx;
		margin-left:8%;
		margin-top:32.5rpx;
		float:left;
	}
	
	.bottom-block{
		width:78%;
		height: 100rpx;
		margin-left:24rpx;
		float:left;
		position: relative;
	}
	
	
	.bottom-block .note{
		
		line-height: 100rpx;
		font-size:32rpx;
		color:#333334;
		float:left;
	}
	
	.bottom-block image{
		float:left;
		width:13rpx;
		height:26rpx;
	    margin-top:37rpx;
		position:absolute;
		right:32rpx;
	}
	
	.heng{
		width:646rpx;
		height: 3rpx;
		padding-left:104rpx;
		background:white;
		
	}
	
</style>
